﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Easyui扩展库 Datagrid - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.findRow.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.moveRow.js"></script>
    <script>
        $(function () {
            var getFrozenColumns = function () {
                var result = [];

                var c1 = [];
                c1.push({ field: 'ID', title: '主键ID', width: 100 });
                c1.push({ field: 'AreaName', title: '地区', width: 150 });
                c1.push({ field: 'Sex1', title: '男', width: 90 });
                c1.push({ field: 'Sex2', title: '女', width: 90 });

                result.push(c1);

                return result;
            };

            var getColumns = function () {
                var result = [];

                var normal00000 = [
                    { field: 'TS1', title: '测试1', width: 60 },
                    { field: 'TS2', title: '测试2', width: 60 }
                ];
                result.push(normal00000);

                return result;
            };
            var options = {
                title: "列表",
                idField: "ID",
                rownumbers: false,
                fit: true,
                border: false,
                singleSelect: true,
                toolbar: [
                    {
                        iconCls: 'icon-edit',
                        text: "将地区为“宁波”的数据行移动到地区为“江西”的数据行的下方",
                        handler: function () {
                            var t = $("#dg1");
                            var rowSource = t.datagrid("findRow", function (itemRow, itemIndex) { return itemRow.AreaName == "宁波"; });
                            var rowSourceIndex = t.datagrid("getRowIndex", rowSource);
                            var rowTarget = t.datagrid("findRow", function (itemRow, itemIndex) { return itemRow.AreaName == "江西"; });
                            var rowTargetIndex = t.datagrid("getRowIndex", rowTarget);

                            t.datagrid("moveRow", { target: rowTargetIndex, source: rowSourceIndex, point: "bottom" });
                        }
                    },
                    "-",
                    {
                        iconCls: 'icon-edit',
                        text: "将地区为“西藏”的数据行移动到地区为“宁波”的数据行的上方",
                        handler: function () {
                            var t = $("#dg1");
                            var rowSource = t.datagrid("findRow", function (itemRow, itemIndex) { return itemRow.AreaName == "西藏"; });
                            var rowSourceIndex = t.datagrid("getRowIndex", rowSource);
                            var rowTarget = t.datagrid("findRow", function (itemRow, itemIndex) { return itemRow.AreaName == "宁波"; });
                            var rowTargetIndex = t.datagrid("getRowIndex", rowTarget);

                            t.datagrid("moveRow", { target: rowTargetIndex, source: rowSourceIndex, point: "top" });
                        }
                    },
                    "-",
                    {
                        iconCls: 'icon-edit',
                        text: "将地区为“南京”的数据行移动到地区为“西藏”的数据行的下方",
                        handler: function () {
                            var t = $("#dg1");
                            var rowSource = t.datagrid("findRow", function (itemRow, itemIndex) { return itemRow.AreaName == "南京"; });
                            var rowSourceIndex = t.datagrid("getRowIndex", rowSource);
                            var rowTarget = t.datagrid("findRow", function (itemRow, itemIndex) { return itemRow.AreaName == "西藏"; });
                            var rowTargetIndex = t.datagrid("getRowIndex", rowTarget);

                            t.datagrid("moveRow", { target: rowTargetIndex, source: rowSourceIndex, point: "bottom" });
                        }
                    },
                    "-",
                    {
                        iconCls: 'icon-edit',
                        text: "将地区为“西藏”的数据行往上移动一行",
                        handler: function () {
                            var t = $("#dg1");
                            var rowSource = t.datagrid("findRow", function (itemRow, itemIndex) { return itemRow.AreaName == "西藏"; });
                            var rowSourceIndex = t.datagrid("getRowIndex", rowSource);

                            t.datagrid("shiftRow", { index: rowSourceIndex, type: "up" });
                        }
                    }
                ],
                frozenColumns: getFrozenColumns(),
                columns: getColumns(),
                method: "get",
                url: "datagrid-common-data.json",
                rowStyler: function (index, row) {
                    var val = row.AreaName;
                    if (val == "宁波") { return "background-color:red;"; }
                    else if (val == "江西") { return "background-color:pink;"; }
                    else if (val == "西藏") { return "background-color:green;"; }
                    else if (val == "南京") { return "background-color:#ccc;"; }
                },
                onBeforeMoveRow: function (target, source, point) {

                },
                onMoveRow: function (target, source, point) {
                    $.messager.alert("移动完成", " 源数据行[" + source.AreaName + "]移动至目标数据行[" + target.AreaName + "]的" + (point == "top" ? "上方" : "下方") + "，操作完成。 ");
                }
            };

            $("#dg1").datagrid(options);
        });
    </script>
</head>
<body>
    <div class="easyui-panel" data-options="fit:true,border:false">
        <table id="dg1"></table>
    </div>
</body>
</html>
